<template>
    <n-divider>自定义hook</n-divider>
    <h2 style="color:brown">
        <p>1、在组件之间重用状态</p>
        <p>2、抽取一些常用的方法，例如前端页面常用的防抖和截流</p>
        <p>防抖：常用于输入框搜索，避免频繁请请求服务端数据，短时间只请求最后的结果</p>
        <p>截流：常用于表单提交按钮，防止重复多次提交信息</p>
        <p>这里没有做防抖截流的例子，而是做了一个计数器、获取屏幕宽高，鼠标点击后的坐标hook</p>
    </h2>
    <h1>{{ count }}</h1>
    <button @click="plus">plus</button>
    <h1>屏幕尺寸：</h1>
    <div>宽度：{{ width }}</div>
    <div>高度：{{ height }}</div>
    <h1>鼠标点击坐标</h1>
    <div>x：{{ pointrEvent.x }}</div>
    <div>y：{{ pointrEvent.y }}</div>
</template>
    
<script setup lang='ts'>
import { ref, watch } from "vue";
import useWindowResize from "./useWindowResize";
const count = ref(0);
const plus = ()=>{
    count.value++;
}
watch(count, () => {
    document.title = "update: " + count.value;
});
const { width, height, pointrEvent } = useWindowResize();
</script>
    
<style>
    
</style>